<%@ include file="/common/taglibs.jsp"%>

<head>
<title><fmt:message key="createBirth.title" /></title>
<script type="text/javascript" src="scripts/datetimepicker.js">
	//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
	//Script featured on JavaScript Kit (http://www.javascriptkit.com)
	//For this script, visit http://www.javascriptkit.com
</script>
<script type="text/javascript">
	function confirmSave(obj) {
		var msg = "Are you sure you want to submit record. Once submitted you can not edit record?";
		ans = confirm(msg);
		return ans;
	}
</script>

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="scripts/highchart/js/highcharts.js"></script>
<script type="text/javascript"
	src="scripts/highchart/js/modules/exporting.js"></script>
<script type="text/javascript" src="scripts/highchart/js/themes/gray.js"></script>


<script type="text/javascript">
	var piechartinfo = {
		type : 'pie',
		name : 'Custom Info',
		data : []
	}

	$(function() {

		$(document).ready(function() {

			//syntax highlighter
			hljs.tabReplace = '    ';
			hljs.initHighlightingOnLoad();

			//accordion
			$('h3.accordion').accordion({
				defaultOpen : 'section1',
				cookieName : 'accordion_nav',
				speed : 'slow',
				animateOpen : function(elem, opts) { //replace the standard slideUp with custom function
					elem.next().slideFadeToggle(opts.speed);
				},
				animateClose : function(elem, opts) { //replace the standard slideDown with custom function
					elem.next().slideFadeToggle(opts.speed);
				}
			});

			$('h3.accordion2').accordion({
				defaultOpen : 'sample-1',
				cookieName : 'accordion2_nav',
				speed : 'slow',
				cssClose : 'accordion2-close', //class you want to assign to a closed accordion header
				cssOpen : 'accordion2-open',

			});

			//custom animation for open/close
			$.fn.slideFadeToggle = function(speed, easing, callback) {
				return this.animate({
					opacity : 'toggle',
					height : 'toggle'
				}, speed, easing, callback);
			};

		});

		var chart;
		function requestData() {
			if (typeof (chart) == 'undefined') {
				setTimeout(requestData, 1000);
			} else {

				$.ajax({
					url : 'resources/chart.action',
					success : function(point) {
						//alert('Test '+ point);
						var response = JSON.parse(point);
						piechartinfo.data.push([ 'Male', response.Male ]);
						piechartinfo.data.push([ 'FeMale', response.FeMale ]);
						chart.addSeries(piechartinfo);
					},
					cache : false
				});

			}
		}

		$(document).ready(
				function() {
					chart = new Highcharts.Chart({

						chart : {
							renderTo : 'container',
							plotBackgroundColor : null,
							plotBorderWidth : null,
							plotShadow : false,

							events : {
								load : requestData
							}
						},
						title : {
							text : 'Today- Birth Status '
						},
						tooltip : {
							formatter : function() {
								return '<b>' + this.point.name + '</b>$ta: '
										+ this.percentage + ' %';
							}
						},
						plotOptions : {
							pie : {
								allowPointSelect : true,
								cursor : 'pointer',
								dataLabels : {
									enabled : true,
									color : '#000000',
									connectorColor : '#000000',
									formatter : function() {
										return '_$t_$ta_$t' + this.point.name
												+ '_$t_$ta_$t_$ta: '
												+ this.percentage + ' %';
									}
								}
							}
						},
						series : [ piechartinfo ]
					});
				});

	});
</script>

<style type="text/css">
#body {
	width: 90%
}
</style>

<style id="wrc-middle-css" type="text/css">
.wrc_whole_window {
	display: none;
	position: fixed;
	z-index: 2147483647;
	background-color: rgba(40, 40, 40, 0.9);
	word-spacing: normal !important;
	margin: 0px !important;
	padding: 0px !important;
	border: 0px !important;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	line-height: normal !important;
	letter-spacing: normal !important;
	overflow: hidden;
}

.wrc_bar_window {
	display: none;
	position: fixed;
	z-index: 2147483647;
	background-color: rgba(60, 60, 60, 1.0);
	word-spacing: normal !important;
	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;
	margin: 0px !important;
	padding: 0px !important;
	border: 0px !important;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 40px;
	line-height: normal !important;
	letter-spacing: normal !important;
	color: white !important;
	font-size: 13px !important;
}

.wrc_middle {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

.wrc_middle_main {
	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;
	font-size: 14px;
	width: 600px;
	height: auto;
	background:
		url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-body.jpg)
		repeat-x left top;
	background-color: rgb(39, 53, 62);
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.wrc_middle_tq_main {
	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;
	font-size: 16px;
	width: 615px;
	height: 460px;
	background:
		url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-sitecorrect.png)
		no-repeat;
	background-color: white;
	color: black !important;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.wrc_middle_logo {
	background:
		url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/logo.jpg)
		no-repeat left bottom;
	width: 140px;
	height: 42px;
	color: orange;
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}

.wrc_icon_warning {
	margin: 20px 10px 20px 15px;
	float: left;
	background-color: transparent;
}

.wrc_middle_title {
	color: #b6bec7;
	height: auto;
	margin: 0px auto;
	font-size: 2.2em;
	white-space: nowrap;
	text-align: center;
}

.wrc_middle_hline {
	height: 2px;
	width: 100%;
	display: block;
}

.wrc_middle_description {
	text-align: center;
	margin: 15px;
	font-size: 1.4em;
	padding: 20px;
	height: auto;
	color: white;
	min-height: 3.5em;
}

.wrc_middle_actions_main_div {
	margin-bottom: 15px;
	text-align: center;
}

.wrc_middle_actions_blue_button div {
	display: inline-block;
	width: auto;
	cursor: Pointer;
	margin: 3px 10px 3px 10px;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
}

.wrc_middle_actions_blue_button {
	-moz-appearance: none;
	border-radius: 7px;
	-moz-border-radius: 7px/7px;
	border-radius: 7px/7px;
	background-color: rgb(0, 173, 223) !important;
	display: inline-block;
	width: auto;
	cursor: Pointer;
	border: 2px solid #00dddd;
	padding: 0px 20px 0px 20px;
}

.wrc_middle_actions_blue_button:hover {
	background-color: rgb(0, 159, 212) !important;
}

.wrc_middle_actions_blue_button:active {
	background-color: rgb(0, 146, 200) !important;
	border: 2px solid #00aaaa;
}

.wrc_middle_actions_grey_button div {
	display: inline-block;
	width: auto;
	cursor: Pointer;
	margin: 3px 10px 3px 10px;
	color: white !important;
	font-size: 15px;
	font-weight: bold;
}

.wrc_middle_actions_grey_button {
	-moz-appearance: none;
	border-radius: 7px;
	-moz-border-radius: 7px/7px;
	border-radius: 7px/7px;
	background-color: rgb(100, 100, 100) !important;
	display: inline-block;
	width: auto;
	cursor: Pointer;
	border: 2px solid #aaaaaa;
	text-decoration: none;
	padding: 0px 20px 0px 20px;
}

.wrc_middle_actions_grey_button:hover {
	background-color: rgb(120, 120, 120) !important;
}

.wrc_middle_actions_grey_button:active {
	background-color: rgb(130, 130, 130) !important;
	border: 2px solid #00aaaa;
}

.wrc_middle_action_low {
	font-size: 0.9em;
	white-space: nowrap;
	cursor: Pointer;
	color: grey !important;
	margin: 10px 10px 0px 10px;
	text-decoration: none;
}

.wrc_middle_action_low:hover {
	color: #aa4400 !important;
}

.wrc_middle_actions_rest_div {
	padding-top: 5px;
	white-space: nowrap;
	text-align: center;
}

.wrc_middle_action {
	white-space: nowrap;
	cursor: Pointer;
	color: red !important;
	font-size: 1.2em;
	margin: 10px 10px 0px 10px;
	text-decoration: none;
}

.wrc_middle_action:hover {
	color: #aa4400 !important;
}
</style>
<script id="wrc-script-middle_window" type="text/javascript"
	language="JavaScript">
	var g_inputsCnt = 0;
	var g_InputThis = new Array(null, null, null, null);
	var g_alerted = false;/* we test the input if it includes 4 digits   (input is a part of 4 inputs for filling the credit-card number)*/
	function is4DigitsCardNumber(val) {
		var regExp = new RegExp('[0-9]{4}');
		return (val.length == 4 && val.search(regExp) == 0);
	}/* testing the whole credit-card number 19 digits devided by three '-' symbols or   exactly 16 digits without any dividers*/
	function isCreditCardNumber(val) {
		if (val.length == 19) {
			var regExp = new RegExp('[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}');
			return (val.search(regExp) == 0);
		} else if (val.length == 16) {
			var regExp = new RegExp('[0-9]{4}[0-9]{4}[0-9]{4}[0-9]{4}');
			return (val.search(regExp) == 0);
		}
		return false;
	}
	function CheckInputOnCreditNumber(self) {
		if (g_alerted)
			return false;
		var value = self.value;
		if (self.type == 'text') {
			if (is4DigitsCardNumber(value)) {
				var cont = true;
				for (i = 0; i < g_inputsCnt; i++)
					if (g_InputThis[i] == self)
						cont = false;
				if (cont && g_inputsCnt < 4) {
					g_InputThis[g_inputsCnt] = self;
					g_inputsCnt++;
				}
			}
			g_alerted = (g_inputsCnt == 4);
			if (g_alerted)
				g_inputsCnt = 0;
			else
				g_alerted = isCreditCardNumber(value);
		}
		return g_alerted;
	}
	function CheckInputOnPassword(self) {
		if (g_alerted)
			return false;
		var value = self.value;
		if (self.type == 'password') {
			g_alerted = (value.length > 0);
		}
		return g_alerted;
	}
	function onInputBlur(self, bRatingOk, bFishingSite) {
		var bCreditNumber = CheckInputOnCreditNumber(self);
		var bPassword = CheckInputOnPassword(self);
		if ((!bRatingOk || bFishingSite == 1) && (bCreditNumber || bPassword)) {
			var warnDiv = document.getElementById("wrcinputdiv");
			if (warnDiv) { /* show the warning div in the middle of the screen */
				warnDiv.style.left = "0px";
				warnDiv.style.top = "0px";
				warnDiv.style.width = "100%";
				warnDiv.style.height = "100%";
				document.getElementById("wrc_warn_fs").style.display = 'none';
				document.getElementById("wrc_warn_cn").style.display = 'none';
				if (bFishingSite)
					document.getElementById("wrc_warn_fs").style.display = 'block';
				else
					document.getElementById("wrc_warn_cn").style.display = 'block';
				warnDiv.style.display = 'table';
			}
		}
	}
</script>
</head>


</head>

<body class="createBirth" />

<div class="span3">
	<c:choose>
		<c:when test="${not empty zoneId and (birth.status == 'Submit')}">
			<h2>
				<fmt:message key="createBirth.heading1" />
			</h2>
			<fmt:message key="createBirth.message1" />
		</c:when>
		<c:otherwise>
			<h2>
				<fmt:message key="createBirth.heading" />
			</h2>
			<fmt:message key="createBirth.message" />
		</c:otherwise>
	</c:choose>

</div>
<div class="span9">
	<s:form name="createBirthForm" action="saveBirth.action"
		enctype="multipart/form-data" method="post" validate="true"
		cssClass="well form-horizontal">
		<s:hidden key="birth.id" />
		<s:hidden key="zoneId" />
		<s:hidden key="id" />
		<input type="hidden" name="from" value="${param.from}" />

		<div id="accordion">
			<!-- panel -->
			<h3 class="accordion accordion-close" id="body-section1">
				Birth Details<span></span>
			</h3>
			<div class="container" style="display: table-cell;">
				<div class="content">
					<fieldset class="control-group">
						<label class="control-label"> Date of Birth:</label>
						<div class="controls">
							<input id="birthdate" name="birth.birthDateString" type="text"
								size="25" title="date" contenteditable="false" value="${birth.birthDateString}"> <a
								href="javascript:NewCal('birthdate','ddmmmyyyy',true,24)"><img
								src="images/cal.gif" width="16" height="16" border="0"
								alt="Pick a date"> </a>
						</div>
					</fieldset>
					<script type="text/javascript">
						var textbox = document.getElementById('birthdate');
						textbox.value = "${birth.birthDateString}";
					</script>

					<s:select name="birth.sex" key="birth.sex"
						list="#{'Male':'Male','Female':'Female'}" headerKey="-1"
						headerValue="--- Select ---"></s:select>
					<s:textfield key="birth.childName" />
					<s:textfield key="birth.motherName" required="true" />
					<s:textfield key="birth.fatherName" required="true" />
					<s:textfield key="birth.mobileNumber" required="true" />
					<s:select name="birth.birthPlace" key="birth.birthPlace"
						list="birthPlaces" headerKey="-1"
						headerValue="--- Select ---"></s:select>

				</div>
			</div>
			<!-- end panel -->

			<!-- panel -->
			<h3 class="accordion accordion-close" id="body-section2"
				title="Place where mother usually lives. This can be different from the place where
			delivery occured.">
				Residence Details of Mother<span></span>
			</h3>
			<div class="container" style="display: table-cell;">
				<div class="content">

					<s:textfield key="birth.residencePlaceName"
						title="Name of town/village" />
					<s:select name="birth.residencePlaceType"
						key="birth.residencePlaceType" list="resPlaceTypes" headerKey="-1"
						headerValue="--- Select ---"></s:select>

					<s:select name="birth.motherAge" key="birth.motherAge"
						list="ageList" headerKey="-1" headerValue="--- Select ---"></s:select>

					<s:textfield key="District" />
					<s:textfield key="State" />

					<%-- 					    <s:textarea key="birth.address"/> --%>
					<%-- 			            <s:textfield key="birth.postalCode"/> --%>
				</div>
			</div>
			<!-- end panel -->
			<!-- panel -->
			<h3 class="accordion accordion-close" id="body-section3">
				Family Background and Education Details<span></span>
			</h3>
			<div class="container" style="display: table-cell;">
				<div class="content">
					<s:select name="birth.fatherEducation" key="birth.fatherEducation"
						list="educationLevels" headerKey="-1" headerValue="--- Select ---"></s:select>

					<s:select name="birth.motherEducation" key="birth.motherEducation"
						list="educationLevels" headerKey="-1" headerValue="--- Select ---"></s:select>

					<s:textfield key="birth.fatherOccupation"
						title="If no occupation, write NIL" />

					<s:select name="birth.motherAgeAtMarriage"
						key="birth.motherAgeAtMarriage" list="ageList" headerKey="-1"
						headerValue="--- Select ---"
						title="If married more than once, enter the age at the time of first marriage"></s:select>

					<s:select name="birth.motherAgeonChildBirth"
						key="birth.motherAgeonChildBirth" list="ageList" headerKey="-1"
						headerValue="--- Select ---"></s:select>

					<s:select name="birth.numberOfAliveChildren"
						key="birth.numberOfAliveChildren" list="numOfChildren"
						headerKey="-1" headerValue="--- Select ---"
						title="Total children born alive from all marriage(s) including this child"></s:select>

					<s:select name="birth.familyReligion" key="birth.familyReligion"
						list="religions" headerKey="-1" headerValue="--- Select ---"></s:select>

				</div>
			</div>
			<!-- end panel -->

			<!-- panel -->
			<h3 class="accordion accordion-close" id="body-section4">
				Delivery Details<span></span>
			</h3>
			<div class="container" style="display: table-cell;">
				<div class="content">
					<s:select name="birth.attentionType" key="birth.attentionType"
						list="attentionTypes" headerKey="-1" headerValue="--- Select ---"></s:select>

					<s:select name="birth.deliveryMethod" key="birth.deliveryMethod"
						list="deliveryType" headerKey="-1" headerValue="--- Select ---"></s:select>

					<s:textfield key="birth.birthWeight" />
					<s:textfield key="birth.pregnancyDuration" />

				</div>
			</div>
			<!-- end panel -->

			<!-- panel -->
			<h3 class="accordion accordion-close" id="body-section4">
				Other information<span></span>
			</h3>
			<div class="container" style="display: table-cell;">
				<div class="content">
					<s:textfield key="Informant's name" />
					<s:textarea key="Informant's Address" />


					<s:file name="file" label="%{getText('uploadForm.file')}" />
					<s:if test="birth.idProof != null">
						<img
							src="showImage.action?id=<s:property value="birth.id"/>&from=list"
							border="0" width="100" height="100">
					</s:if>

				</div>
			</div>
			<!-- end panel -->

			<c:if test="${not empty zoneId and (birth.status == 'Submit')}">
				<!-- panel -->
				<h3 class="accordion accordion-close" id="body-section4">
					Approval Section<span></span>
				</h3>
				<div class="container" style="display: table-cell;">
					<div class="content">
						<s:textfield key="birth.registrationNumber" required="true" />
						<s:textfield key="birth.commentses" required="true" />
					</div>
				</div>
				<!-- end panel -->
			</c:if>
		</div>



		<fieldset class="form-actions">
			<c:if
				test="${(birth.status == 'Draft' and not empty birth.id and empty zoneId) or empty birth.id}">
				<s:submit key="button.submit" method="submitBirth"
					onclick="return confirmSave('user');" cssClass="btn btn-primary"
					theme="simple"
					title="Birth record will be submitted to zone office for approval" />
				<s:submit key="button.save" cssClass="btn btn-primary"
					theme="simple"
					title="Birth record will be saved and available for edit/submit later" />
			</c:if>
			<c:if test="${not empty zoneId}">
				<c:if test="${(birth.status == 'Submit')}">
					<s:submit key="button.approve" method="appBirth"
						cssClass="btn btn-primary" theme="simple" />
					<s:submit key="button.reject" method="rejBirth"
						cssClass="btn btn-primary" theme="simple" />
				</c:if>
			</c:if>
			<s:submit key="button.cancel" method="cancel" cssClass="btn"
				theme="simple" />
		</fieldset>
	</s:form>

</div>

